<template>
  <div id="centerRight1">
    <div class="bg-color-black">
      <div class="percent">
        <div class="item bg-color-black">
          <span>当前班组优等品率</span>
          <CenterChart :id="rate[0].id" :tips="rate[0].tips" :color-obj="rate[0].colorData" style="margin-left: 30px" />
        </div>
        <div class="item bg-color-black">
          <span>前一班组优等品率</span>
          <CenterChart :id="rate[1].id" :tips="rate[1].tips" :color-obj="rate[1].colorData" style="margin-left: 35px" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CenterChart from '@/components/echart/center/centerChartRate'

export default {
  components: {
    CenterChart
  },
  data() {
    return {
      water: {
        data: [20, 98],
        shape: 'roundRect',
        formatter: '{value}%',
        waveNum: 1
      },
      rate: [
        {
          id: 'centerRate1',
          tips: 98.02,
          colorData: {
            textStyle: '#3fc0fb',
            series: {
              color: ['#00bcd44a', 'transparent'],
              dataColor: {
                normal: '#03a9f4',
                shadowColor: '#97e2f5'
              }
            }
          }
        },
        {
          id: 'centerRate2',
          tips: 96.91,
          colorData: {
            textStyle: '#67e0e3',
            series: {
              color: ['#faf3a378', 'transparent'],
              dataColor: {
                normal: '#ff9800',
                shadowColor: '#fcebad'
              }
            }
          }
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
$box-height: 320px;
$box-width: 100%;
#centerRight1 {
  padding: 20px 16px 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  display: flex;
  .bg-color-black {
    height: $box-height - 20px;
    border-radius: 5px;
  }
  .text {
    color: #c3cbde;
  }
  .percent {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 298px;
      height: 300px;
      span {
        margin-top: 8px;
        font-size: 14px;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>
